<template>
  <div class="layoutCon">
    <div class="breadcrumb">
      <router-link class="home" to="/"></router-link> > <router-link to="/my">마이페이지</router-link> > 나의 채용정보 조회 회원
    </div>
    <div class="layoutMy">
      <user-center-nav></user-center-nav>
      <div class="myCon">
        <div class="comList">
          <div class="tit">
            <h2>나의 채용정보 조회 회원</h2>
          </div>
          <div class="loadList" v-loading="pageConfig.loading&&pageConfig.page==1">
            <ul v-if="list.length">
              <li v-if="item.title" v-for="(item,index) in list" :key="index">
                <div class="time"><em>{{formatName(item.name)}}</em>{{item.look_at}}</div>
                <a href="javascript:;" target="_self" class="txt" @click="showInfo(item.to_id,index)">
                  <strong>{{item.title}}</strong>
                </a>
                <el-button :loading="item.isLoading" class="r btn" @click="showInfo(item.to_id,index)">조회하기</el-button>
              </li>
            </ul>
            <div class="notData" v-if="!pageConfig.loading&&list.length==0">채용정보를 조회한 인재가 없습니다.</div>
            <div class="loadMore" v-if="!pageConfig.isAll">
              <el-button type="primary" :loading="pageConfig.loading" @click="loadMore" class="btnMore">더보기</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <recruit-card :cardParams="cardData" @changeLoad="changeLoad"></recruit-card>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { lookMyIntegratedUsers } from '@/api';
import userCenterNav from '@/components/userCenterNav';
import recruitCard from '@/components/recruitCard'

export default {
  name:'',
  components:{userCenterNav,recruitCard},
  props:[],
  data(){
    return {
      pageConfig:{
        page:1,
        per:20,
        loading:false,
        isAll:true
      },
      list:[],
      cardData:null,
      curIndex:-1,
    }
  },
  computed:{},
  created(){
    this.getList()
  },
  mounted(){},
  methods:{
    async getList(){
      this.pageConfig.loading=true;
      let res = await lookMyIntegratedUsers({page:this.pageConfig.page,per:this.pageConfig.per});
          if (res.code == 200) {
            this.pageConfig.page+=1;
            let _arry=res.data.data,_new=[];
              if(_arry.length){
                _arry.forEach((o)=>{
                  o.title&&_new.push({
                      title:o.title,
                      name:o.name,
                      to_id:o.to_id,
                      to_type:o.to_type,
                      look_at:o.look_at,
                      isLoading:false
                  })
                })
                this.list=this.list.concat(_new);
              }
            !res.data.next_page_url||_new.length<this.pageConfig.per?(this.pageConfig.isAll=true):(this.pageConfig.isAll=false);
            this.pageConfig.loading=false;            
          }else{
            this.pageConfig.loading=false;  
          }
    },
    loadMore(){
      !this.pageConfig.loading&&this.getList();
    },
    showInfo(id,index){
        if(!id){
            this.$alert('등록된 이력서가 없는 회원입니다.', '알림', {
              confirmButtonText: '확인',
            })
            return false;
        }
        this.curIndex>-1&&(this.list[this.curIndex].isLoading=false);
        this.curIndex=index;
        this.list[index].isLoading=true;  
        this.cardData={
            isShow:true,
            id:id
        }
    },
    formatName(name){
        return name.substr(0,1)+'**';
    },
    changeLoad(){
        this.list[this.curIndex].isLoading=false;
    }
  },
  watch:{}
}
</script>
<style lang="scss" scoped>
 @import "@/assets/styles/my.scss";
</style>